<script setup lang="ts">
import PlayButtonS from "@/components/Controls/PlayButtonS.vue"
import MusicAddButton from "@/components/Controls/MusicAddButton.vue"
import DownloadButton from "@/components/Controls/DownloadButton.vue"
import MusicMoreInfo from "@/components/Controls/MusicMoreInfo.vue"
import type {PropType} from "vue"

const props = defineProps({
  song: {
    required: true,
    type: Object as PropType<song_info>
  },
  played: {
    required: true,
    type: Boolean
  },
  themeDarkStyle: {
    required: false,
    default: false,
    type: Boolean
  }
})
</script>

<template>
<div class="btns">
<!--  <PlayButtonS :played="played" :song="song"></PlayButtonS>-->
  <MusicAddButton :songId="song.id"></MusicAddButton>
  <DownloadButton :songId="song.id"></DownloadButton>
  <MusicMoreInfo :songId="song.id"></MusicMoreInfo>
</div>
</template>

<style scoped lang="scss">
.btns{
  display: flex;
  align-items: center;

  div {
    margin-left: 20px;

    &:active{
      transform: translateY(2px);
    }
  }
}
</style>